@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

.classic-promotion-modal

  //- Clear modal defaults
  .modal-dialog
    margin: 60px auto 0 auto
    padding: 0
    width: 746px
    height: 520px
    background: none


  .modal-background
    position: absolute
    top: -61px
    left: 0px

  //- Header
  h1
    position: absolute
    left: 170px
    top: 25px
    margin: 0
    width: 410px
    text-align: center
    color: rgb(254,188,68)
    font-size: 32px
    text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0, black 6px 6px 6px
    font-variant: normal
    text-transform: uppercase
    margin-left: -30px

  //- Close modal button

  .close-modal
    position: absolute
    left: 568px
    top: 17px
    width: 60px
    height: 60px
    color: white
    text-align: center
    font-size: 30px
    padding-top: 15px
    cursor: pointer
    @include rotate(-3deg)

    &:hover
      color: yellow

  //- Paper area

  .paper-area
    position: absolute
    top: 114px
    left: 31px
    min-height: 370px
    width: 684px
    background: #d4c9b1
    border: 3px solid black
    display: flex
    flex-direction: column
    justify-content: space-between
    padding: 10px


    .modal-image-container
      margin-left: auto
      margin-right: auto
      display: flex
      justify-content: center
      img
        width: auto
        height: 100%
        max-width: 100%
        object-fit: contain
    
    .modal-video-container
      margin-left: auto
      margin-right: auto
      width: 70%
      position: relative
      
      .video-aspect-ratio
        position: relative
        padding-top: 56.25% // 16:9 aspect ratio (9/16 = 0.5625)
        height: 0
        overflow: hidden
        
        iframe
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          border: none

    .big-text
      font-weight: bold
      font-size: 20px
      margin: 2px auto

    .med-text
      font-size: 16px
    
    .modal-text
      width: 90%
      margin: 0 auto
    hr
      border-top: 1px solid gray
      margin: 10px 40px

  .actions
    display: flex
    justify-content: center
    margin-top: 10px

  .play-button
    padding: 0 10px
    font-size: 24px
    line-height: 30px
    border-style: solid
    border-image: url(/images/common/button-background-success-active.png) 14 20 20 20 fill round
    &:hover
      border-image: url(/images/common/button-background-success-inactive.png) 14 20 20 20 fill round
    &:active
      border-image: url(/images/common/button-background-success-pressed.png) 14 20 20 20 fill round
    border-width: 14px 20px 20px 20px
    color: darken(white, 5%)
